<template>
	<view class="content">
		<view class="nav-item">
			<u-icon name="arrow-left" color="#fff" size="28" class="icon" @click="goback"></u-icon>
			<view class="txt">
				邀请好友
			</view>
		</view>
		<view class="topbg">
			<view class="txt1">
				邀请好友获奖励
			</view>
			<view class="card-1">
				<view class="item">
					<image src="../../../static/images/btn/cc1.png" mode="aspectFit" class="icon1"></image>
					<view class="txt2">
						<text>发送邀请<br />给好友</text>
					</view>
				</view>
				<view class="">
					<image src="../../../static/images/btn/xyb.png" mode="aspectFill" class="icon2"></image>
				</view>
				<view class="item">
					<image src="../../../static/images/btn/cc2.png" mode="aspectFit" class="icon1"></image>
					<view class="txt2">
						<text>好友完成注册<br />并激活账号</text>
					</view>
				</view>
				<view class="">
					<image src="../../../static/images/btn/xyb.png" mode="aspectFill" class="icon2"></image>
				</view>
				<view class="item">
					<image src="../../../static/images/btn/cc3.png" mode="aspectFit" class="icon1"></image>
					<view class="txt2">
						<text>获得相应<br />比例奖励</text>
					</view>
				</view>
			</view>
			<view class="card-2">
				<view class="flex">
					<view class="txt3">
						我的邀请链接
					</view>
					<view class="bbsd" @click="copy(detail.share_url)">
						<text class="txt4">{{detail.share_url}}</text>
						<image src="../../../static/images/btn/fz1.png" mode="aspectFit" class="icon3"></image>
					</view>
				</view>
				<view class="flex">
					<view class="txt3">
						我的邀请码
					</view>
					<view class="bbsd" @click="copy(detail.share_code)">
						<text class="txt5">{{detail.share_code}}</text>
						<image src="../../../static/images/btn/fz1.png" mode="aspectFit" class="icon3"></image>
					</view>
				</view>
				<view class="btn-bottom" @click="tshow()">
					邀请海报
				</view>

			</view>
			<view class="card-3">
				<view class="txt6">
					邀请说明
				</view>
				<view class="infos">
					测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable>
			<view>
				<view class="txt7">选择海报</view>
				<scroll-view scroll-x="true" class="scroll">
					<view class="item active">
						<image src="" mode=""></image>
					</view>
					<view class="item">
						<image src="" mode=""></image>
					</view>
					<view class="item">
						<image src="" mode=""></image>
					</view>
				</scroll-view>
				<view class="btn-bottoms">
					保存图片
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				haibao: ['1', '2', '1', '4','5','6'],
				active: 0,
				detail:{},
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 点击复制
			copy(e){
				uni.setClipboardData({
				    data: e,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			//获取邀请链接
			getList(){
				this.$http({
					url:this.$api.inviteFriends,
					method:'GET',
					hideLoading:false,
					data:{},
					success:res=>{
						console.log('邀请好友接口返回----------',res)
						this.detail = res.data
					},complete:e=>{
						console.log('返回-----------',e)
						uni.hideLoading();
					}
				})
			},
			goback() {
				uni.switchTab({
					url: '../index'
				})
			},
			changer(e) {
				this.active = e
			},
			tshow() {
				this.show = true
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.nav-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		width: 100%;
		z-index: 999;
		padding: 0 30rpx;
		margin-top: 44rpx;
	}

	.txt {
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 44rpx;
		flex: 1;
		text-align: center;
	}

	.topbg {
		background: url(../../../static/images/btn/sqbg.png) no-repeat;
		height: 446rpx;
		width: 100%;
		background-size: 100% 100%;
		position: fixed;
		top: 0;

	}

	.txt1 {
		font-size: 76rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 106rpx;
		margin: 140rpx 36rpx 80rpx;
	}

	.card-1 {
		width: 696rpx;
		height: 228rpx;
		padding: 42rpx;
		border-radius: 20rpx;
		margin: 10px auto;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.icon1 {
		height: 56rpx;
		width: 56rpx;
	}

	.icon2 {
		width: 116rpx;
		height: 26rpx;
	}

	.txt2 {
		font-size: 20rpx;
		font-weight: 600;
		color: #000000;
		line-height: 28rpx;
		text-align: center;
		margin-top: 10px;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card-2 {
		width: 696rpx;
		height: 274rpx;
		padding: 32rpx;
		border-radius: 20rpx;
		margin: 10px auto;
		background: #fff;
	}

	.icon3 {
		width: 38rpx;
		height: 34rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin: 15rpx 32rpx;
	}

	.txt3 {
		font-size: 24rpx;
		font-weight: 600;
		color: #000000;
		line-height: 34rpx;
	}

	.txt4 {
		font-size: 22rpx;
		font-weight: 600;
		color: #000000;
		line-height: 32rpx;
		width: 342rpx;
		overflow: hidden;
	}

	.txt5 {
		font-size: 22rpx;
		font-weight: 600;
		color: #000000;
		line-height: 32rpx;
		width: 82rpx;
		overflow: hidden;
	}

	.bbsd {
		height: 36rpx;
		background: #F7F6FA;
		border-radius: 18rpx;
		padding: 0 10rpx;
		display: flex;
	}

	.btn-bottom {
		width: 626rpx;
		height: 70rpx;
		background: #2F73FD;
		box-shadow: 0px 4rpx 8rpx 0px rgba(166, 196, 255, 1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 27rpx;
	}

	.card-3 {
		width: 696rpx;
		height: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
	}

	.txt6 {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 44px;
		margin: 24rpx 36rpx 10rpx;
		border-bottom: 1px solid #F8F8F8;
	}

	.infos {
		font-size: 22rpx;
		color: #333;
		padding: 14rpx;
		line-height: 32rpx;
	}

	.txt7 {
		font-size: 30rpx;
		font-weight: 600;
		color: #131415;
		line-height: 42px;
		padding-left: 24rpx;
	}

	.scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	.scroll .item {
		display: inline-block;
		background-color: #000000;
		width: 310rpx;
		height: 552rpx;
		margin-right: 20rpx;
		font-size: 0;
		text-align: center;
		position: relative;
	}
	.scroll .item image{
		width: 310rpx;
		height: 552rpx;
	}
	.scroll .item.active:after{
		content: '';
		width: 34rpx;
		height: 34rpx;
		background: url(../../../static/images/ico/xz.png)center center no-repeat;
		background-size: 34rpx 34rpx;
		position: absolute;
		right: 18rpx;
		bottom: 12rpx;
		z-index: 2;
	}
	.btn-bottoms {
		width: 686rpx;
		height: 90rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166, 196, 255, 1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		margin: 27rpx auto;
	}
</style>
